<template>
  <div class="box">
    <el-card>
      <div class="btn">
        <el-button
          v-for="(item, i) in roles"
          :key="i"
          type="primary"
          :icon="item.icon"
          circle
          @click="btnBox(item.type)"
        ></el-button>
      </div>
      <div class="list">
        <el-table
          ref="singleTable"
          :data="tableData"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%"
        >
          <el-table-column type="index" width="50" label="序号" align="center">
          </el-table-column>
          <el-table-column property="classId" label="班级编号">
          </el-table-column>
          <el-table-column property="className" label="班级名称">
          </el-table-column>
          <el-table-column property="classMajor" label="专业名称">
            <template slot-scope="scope">
              {{ scope.row.classMajor | majorFilter(regionSel) }}
            </template>
          </el-table-column>
          <el-table-column property="classNum" label="人数"> </el-table-column>
          <el-table-column property="classInstructor" label="辅导员">
          </el-table-column>
          <el-table-column property="classStartDate" label="开班日期">
          </el-table-column>
          <el-table-column property="classLength" label="学制">
            <template slot-scope="scope">
              {{ scope.row.classLength == 0 ? "三年" : "四年" }}
            </template>
          </el-table-column>
          <el-table-column property="classStatus" label="状态">
            <template slot-scope="scope">
              {{ scope.row.classStatus == 0 ? "未开班" : "开班" }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pages @pageIndex="goPageIndex" :total="tableData.length"></pages>
      <!-- <pages @pageIndex="goPageIndex" :total="20"></pages> -->
    </el-card>

    <addClassInfo
      @show="isShow = false"
      :classInfo="classInfo"
      :isShow="isShow"
      @refreshBox="getClassList"
    >
    </addClassInfo>
  </div>
</template>

<script>
import { getClassList, delClassInfo } from "../../api/classApi";
// getScoreList
import addClassInfo from "../../components/class/addClassInfo.vue";

import pages from "../../components/pages.vue";

export default {
  data() {
    return {
      roles: [
        { type: "add", icon: "el-icon-plus" },
        { type: "update", icon: "el-icon-edit-outline" },
        { type: "del", icon: "el-icon-minus" }
      ],
      tableData: [],
      currentRow: null,
      classInfo: null,
      isShow: false,
      regionSel: [
        {
          majorNum: "001",
          majorName: "计算机"
        },
        {
          majorNum: "002",
          majorName: "音乐"
        },
        {
          majorNum: "003",
          majorName: "法律"
        }
      ],
      page:{
        pageSize:10,
        pageIndex:1
      }
    };
  },
  components: {
    addClassInfo,
    pages
  },

  created() {
    this.getClassList();
  },

  methods: {
    // 操作按钮
    btnBox(t) {
      switch (t) {
        case "add":
          this.isShow = true;
          this.classInfo = null;
          return;
        case "update":
          if (this.currentRow != null) {
            this.isShow = true;
            this.classInfo = JSON.parse(JSON.stringify(this.currentRow));
          } else {
            this.$message("请选中数据");
          }
          return;
        case "del":
          if (this.currentRow.id == undefined) {
            this.$message({
              type: "info",
              message: "按钮不可删除"
            });
            return;
          }
          if (this.currentRow != null) {
            this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                const loading = this.$loading({
                  lock: true,
                  text: "Loading",
                  spinner: "el-icon-loading",
                  background: "rgba(0, 0, 0, 0.7)"
                });
                delClassInfo(this.currentRow.id).then(res => {
                  loading.close();
                  console.log("del", res);
                  this.$message({
                    type: "success",
                    message: "删除成功!"
                  });
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除"
                });
              });
          } else {
            this.$message("请选中数据");
          }
          return;
      }
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    // 获取列表
    getClassList() {
      getClassList(this.page).then(res => {
        this.tableData = res.data.list;
      });
    },
    // 分页查询
    goPageIndex(obj){
      this.page = obj
      this.getClassList()
    }
  },
  computed: {},
  filters: {
    getStatus(n) {
      if (n == 0) return "关闭";
      else return "开启";
    },
    courseDateFun(n) {
      switch (n) {
        case "1":
          return "大一上";
        case "2":
          return "大一下";
        case "3":
          return "大二上";
        case "4":
          return "大二下";
        case "5":
          return "大三上";
        case "6":
          return "大三下";
        case "7":
          return "大四上";
        case "8":
          return "大四下";
      }
    },
    majorFilter(n, d) {
      if (d.filter(i => n == i.majorNum).length == 0) return "--";
      else return d.filter(i => n == i.majorNum)[0].majorName;
    }
  }
};
</script>

<style lang="scss" scope>
.box {
  text-align: left;
  margin: 20px 0;
  flex: 1;

  .el-card {
    height: 100%;
    .el-card__body {
      height: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      .list{
        flex: 1;
      }
    }
  }
}
</style>
